<HTML>
	<HEAD>
		<TITLE></TITLE>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<META name="GENERATOR" content="BLOCKNOTE.NET">
	<STYLE>
	BODY { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
	P { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
	
	#select-with-checks
	{
	  width:25%%; /* for this demo purposes */
    height:100%%; /* for this demo purposes */
    behavior: ~ select-checkmark;
	}
	
  #select-with-checks options
  {
    margin:0;
    margin-left:16px;
    
    padding:0;
    
    foreground-image:url(theme:tree-view-glyph-closed);
    foreground-repeat: no-repeat;
    foreground-position: -13px 3px;  
  }
  
  #select-with-checks options:expanded
  {
    foreground-image:url(theme:tree-view-glyph-open);
  }  
  
  /*  "caption" - visual portion of listitem
      behavior should change value of checkmark attribute 
      caption here has two icons - checkmark and item icon (as background image)
      */
  
  #select-with-checks caption
  {
    margin:0;
    padding:1px 2px 2px 32px; /* space for two icons */
        
    foreground-image:url(theme:check-normal);
    foreground-repeat: no-repeat;
    foreground-position: 0px 50%;
    
    background-color:transparent; color:windowtext; 
    foreground-image-cursor: pointer;
    
  }
  #select-with-checks option[check="mixed"] > caption,
  #select-with-checks options[check="mixed"] > caption
  {
    foreground-image:url(theme:check-mixed-normal);
  }
  #select-with-checks option[check="on"] > caption,
  #select-with-checks options[check="on"] > caption
  {
    foreground-image:url(theme:check-checked-normal);
  }
    
  #select-with-checks :current > caption
  { 
    background-color:highlight; color:highlighttext; 
  }
    
  #select-with-checks options > caption
  {
    /* put icon as a background image */
    background-image:url(images/icon-folder.png);
    background-repeat: no-repeat;
    background-position: 16px 0px;
  }
  
  #select-with-checks option
  {
    margin:0 0 0 16px;
    padding:0;
    background-color:transparent; color:windowtext; 
  }
  
  /* caption of terminal node */
  #select-with-checks option > caption
  {
    background-image:url(images/icon-file.png);
    background-repeat: no-repeat;
    background-position: 16px 0px;
  }

  
	</STYLE>
	</HEAD>
	<BODY>
    <widget type="select" id="select-with-checks">
      <OPTIONS expanded><caption>Canada</caption>
          <OPTIONS expanded><caption>British Columbia</caption>
            <OPTION check="on"><caption >Vancouver</caption></OPTION>
            <OPTION><caption>Whistler</caption></OPTION>
            <OPTION><caption>Hope</caption></OPTION>
          </OPTIONS>
          <OPTION><caption>Alberta</caption></OPTION>
          <OPTION><caption>Manitoba</caption></OPTION>
      </OPTIONS>
      <OPTIONS expanded><caption>USA</caption>
          <OPTION><caption>Washington</caption></OPTION>
          <OPTION><caption>Oregon</caption></OPTION>
          <OPTION><caption>California</caption></OPTION> 
      </OPTIONS>
      <OPTION><caption>Monaco</caption></OPTION>      
    </widget>
  </BODY>
</HTML>
